<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
    </el-breadcrumb>
      <el-card>
          <el-table
              :data="productList"
              stripe
              border
              style="width: 100%">
              <el-table-column label="商品">
                <el-table-column label="总商品数量">
                    <template slot-scope="scope">
                      <div>
                          {{scope.row.goods.counts}}
                      </div>
                  </template>
                </el-table-column>
                <el-table-column label="总商品订单">
                    <template slot-scope="scope">
                      <div>
                          {{scope.row.goods.orders}}
                      </div>
                  </template>
                </el-table-column>
              </el-table-column>

              <el-table-column label="租赁">
                <el-table-column label="总租赁数量">
                    <template slot-scope="scope">
                      <div>
                          {{scope.row.rent.counts}}
                      </div>
                  </template>
                </el-table-column>
                <el-table-column label="总租赁订单">
                    <template slot-scope="scope">
                      <div>
                          {{scope.row.rent.orders}}
                      </div>
                  </template>
                </el-table-column>
              </el-table-column>
              
              <el-table-column label="vip">
                <el-table-column label="总vip数量">
                    <template slot-scope="scope">
                      <div>
                          {{scope.row.vip.counts}}
                      </div>
                  </template>
                </el-table-column>
                <el-table-column label="总vip订单">
                    <template slot-scope="scope">
                      <div>
                          {{scope.row.vip.orders}}
                      </div>
                  </template>
                </el-table-column>
              </el-table-column>

              <el-table-column label="场地">
                <el-table-column label="总场地数量">
                    <template slot-scope="scope">
                      <div>
                          {{scope.row.yard.counts}}
                      </div>
                  </template>
                </el-table-column>
                <el-table-column label="总场地订单">
                    <template slot-scope="scope">
                      <div>
                          {{scope.row.yard.orders}}
                      </div>
                  </template>
                </el-table-column>
              </el-table-column>
          </el-table>
      </el-card>
    </div>
</template>

<script>
export default {
    data(){
        return{
            productList:[],
        }
    },
    async created(){
        this.getComputed()
    },
    methods:{
      async getComputed(){
          const { data } = await this.$http.get('venue/manage/statistics')
          if (data.state !== 0) {
          return this.$message.error(data.msg)
          }
          this.productList = [data.result]
      },
    }
}
</script>

<style scoped>
    .add{
        display: flex;
        justify-content: flex-end;
    }
    .add .el-button{
        margin-bottom: 10px;
    }
</style>